<template lang="html">
  <div>
    <div class="t-h-center border-wrapper">
      <div v-show="showUserInfo">
        <div class="box">
          <label>输入用户名:</label>
          <Input v-model="username" placeholder="用户名" />
        </div>
        <div class="box">
          <label>输入邮箱:</label>
          <Input v-model="userMail" placeholder="邮箱" />
        </div>
        <div class="box">
          <label>输入手机:</label>
          <Input v-model="userPhone" placeholder="手机" />
        </div>
        <div class="box">
          <Button type="primary" v-on:click="checkUser()">找回密码</Button>
        </div>
      </div>
      <div v-show="showRePassword">
        <div class="box">
          <label>输入新密码:</label>
          <Input v-model="repassword" placeholder="输入新密码" />
        </div>
        <div class="box">
          <Button type="primary" v-on:click="changeUserPassword()"
            >修改密码</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userMail: '',
      userPhone: '',
      username: '',
      repassword: '',
      showRePassword: false,
      showUserInfo: true
    }
  },
  methods: {
    checkUser: function(event) {
      this.$axios
        .post('/users/findPassword', {
          username: this.username,
          userMail: this.userMail,
          userPhone: this.userPhone
        })
        .then(data => {
          if (data.body.status === 1) {
            alert(data.body.message)
          } else {
            alert(data.body.message)
            this.showRePassword = true
            this.showUserInfo = false
            console.log(this.showRePassword)
          }
        })
    },
    changeUserPassword: function(event) {
      this.$axios
        .post('/users/findPassword', {
          username: this.username,
          userMail: this.userMail,
          userPhone: this.userPhone,
          repassword: this.repassword
        })
        .then(data => {
          if (data.body.status === 1) {
            alert(data.body.message)
          } else {
            alert(data.body.message)
            this.$router.go(-1)
          }
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
.t-h-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.border-wrapper {
  padding: 20px;
  border: 1px solid #2d8cf0;
  border-radius: 8px;
}
.box {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;

  label {
    flex: 1;
  }
  .ivu-input-wrapper {
    flex: 3;
  }
}
</style>
